<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
</head>
<body>
    <div id="box">
        <h1>表单验证</h1>
        邮箱：<input type="text" id="email" placeholder="请输入邮箱"> <span class="inf"></span> <br>
        密码：<input type="text" id="psw" placeholder="请输入密码"> <span class="inf"></span> <br>
        <input type="button" value="提交" id="submit">
    </div>
    
</body>
<script>
    /*
        知识点：前端做正则优点：不用频发请求服务器，减轻服务器负担
            * 事件 ： onblur 鼠标失去焦点  onfucus 聚焦
            * 正则的一个方法 ： 正则.test(字符串)
            * trim() 字符串方法，去掉前后空格
    */

   var box = document.getElementById('box');
   var email = document.getElementById('email');
   var psw = document.getElementById('psw');
   var submit = document.getElementById('submit');
   var infs = box.getElementsByClassName('inf');
   var check1 = false;
   var check2 = false;

   email.onfocus = function() {
       //聚焦的时候
    //    console.log('聚焦了')
       infs[0].innerHTML = '请输入邮箱';

   }

    email.onblur = function() {
       //失去焦点：验证正则==表单验证
    //    console.log('失去焦点：验证正则');
       var reg = /^\w+@\w+\.[a-zA-Z]+$/;
       var emailVal = email.value.trim();
       if(emailVal) {
           //非空
        //    console.log('非空，可以继续进行正则验证：' + emailVal);
        var isok = reg.test(emailVal);
        // console.log(isok);
        if(isok) {
            //验证通过：
            infs[0].innerHTML = '验证通过';
            infs[0].style.color = 'green';
            check1 = true;
        }else{
            infs[0].innerHTML = '验证不通过，请按邮箱规则填写';
            infs[0].style.color = 'red';
            check1 = false;
        }
       }else{
           //空字符串
           infs[0].innerHTML = '请输入邮箱';
           infs[0].style.color = 'red';
           check1 = false;
       }
   }


   psw.onfocus = function() {
       //聚焦的时候
    //    console.log('聚焦了')
       infs[1].innerHTML = '以字母开头，长度在6~18之间，只能包含字母、数字和下划线';

   }

   psw.onblur = function() {
       //失去焦点：验证正则==表单验证
    
       var reg = /^[a-zA-Z]\w{5,17}$/;
       var pswVal = psw.value.trim();
       if(pswVal) {
           //非空
        //    console.log('非空，可以继续进行正则验证：' + emailVal);
        var isok = reg.test(pswVal);
        // console.log(isok);
        if(isok) {
            //验证通过：
            infs[1].innerHTML = '验证通过';
            infs[1].style.color = 'green';
            check2 = true;
        }else{
            infs[1].innerHTML = '验证不通过，请按密码规则填写';
            infs[1].style.color = 'red';
            check2 = false;
        }
       }else{
           //空字符串
           infs[1].innerHTML = '请输入以字母开头，长度在6~18之间，只能包含字母、数字和下划线的密码';
           infs[1].style.color = 'red';
           check2 = false;
       }
   }


   //3.点击提交的时候
   submit.onclick = function() {
       if(check1 && check2) {
           //可以提交数据，发请求把数据给后端
           alert('发生请求给后端')
       }else{
           alert('请按规则填写相关内容')
       }
   }

</script>
</html>